<template>
  <div
    class="flex"
    :style="
      row == '24'
        ? 'width:100%'
        : row == '8'
        ? 'width:32.9%'
        : row == '6'
        ? 'width:24.5%'
        : row == '12'
        ? 'width:49.7%'
        : row == '4'
        ? 'width:16%'
        : ''
    "
  >
    <i class="icon" :class="icon"></i>
    <span>{{ value }}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    icon: {
      type: String,
    },
    value: {
      type: String,
    },
    row: {
      type: String,
    },
  },
  methods: {},
  components: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
.flex {
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  padding: 5px 5px;
}
.icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
}
.flex span {
  line-height: 10px;
}

</style>
